<!--
 * @Description: 首页
 * @Author: Ronda
 * @Date: 2020-06-19 17:19:51
 * @LastEditors: 张华智
 * @LastEditTime: 2021-07-17 09:45:26
-->
<template>
  <div id="top">
    <el-carousel :interval="4000" type="card" height="400px">
      <el-carousel-item v-for="item in url" :key="item">
        <!-- <h3 class="medium">{{ item }}</h3> -->
        <img class="pic" :src="item" height="400px" />
      </el-carousel-item>
    </el-carousel>
    <div>
      <span class="bottom">广告位招租</span>
    </div>
    <div>
      <span class="bottom2">广告位招租</span>
    </div>
    <div id="footer">
      <el-col :span="8">
        <el-card shadow="hover" class="C">
          <div id="left" @click="user()">
            <img class="card" src="http://120.53.125.221:8181/uploadimg/用户(1).png" />
          </div>
          <div id="right" @click="user()">
            <span id="font_user_top">1234</span>
            <br />
            <span id="font_user_bo">用户访问量</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="C">
          <div id="left" @click="info()">
            <img class="card" src="http://120.53.125.221:8181/uploadimg/消息(1).png" />
          </div>
          <div id="right" @click="info()">
            <span id="font_user_top">567</span>
            <br />
            <span id="font_user_bo">未读消息</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="C">
          <div id="left" @click="time()">
            <img class="card" src="http://120.53.125.221:8181/uploadimg/时间(1).png" />
          </div>
          <div id="right" @click="time()">
            <span id="font_user_top">{{this.currentTime}}</span>
            <br />
            <span id="font_user_bo">上次登录时间</span>
          </div>
        </el-card>
      </el-col>
    </div>
    <el-dialog
      title="访客量"
      :visible.sync="userDialogVisible"
      width="80%"
     
    >
      <span>访客量统计</span>
      <div id="userGram"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="userDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
  title="消息"
  :visible.sync="MessageDialogVisible"
  width="30%">
  <span>未读消息</span>
   <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="消息内容"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toRead()" >标记为已读</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="MessageDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="MessageDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%">
  <span>这里功能尚未开发</span>
  <h1>广告位招租</h1>
  
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      url: [
        "http://121.199.29.84/gxqd/img2.jpg",
        "https://tse1-mm.cn.bing.net/th/id/OIP-C.g9PdU6wMIG0Zx9yweOO7nQHaEK?pid=ImgDet&rs=1",
        "https://cdn.imgcn.top/20200324/51734024fbd04e91be9c06b61e401195.jpeg!logo",
        "https://tse1-mm.cn.bing.net/th/id/R-C.564ee1ad3def534840281082d8327775?rik=FMW%2bnLF6WAjkMg&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40168%2f0400.jpg_wh860.jpg&ehk=zv1uXZp6Vq36VhbYaOqO1n2PJ8IYWSOx0gSVWh8mjvs%3d&risl=&pid=ImgRaw"
      ],
      currentTime: "",
      userDialogVisible: false,
      MessageDialogVisible:false,
      dialogVisible:false,
      tableData: [{
          date: '2002-05-03 17:32',
          address: '罗文洋是傻逼'
        }, {
          date: '2002-05-03 17:32',
          address: '罗文洋是傻逼'
        }, {
          date: '2002-05-03 17:32',
          address: '罗文洋是傻逼'
        }, {
         date: '2002-05-03 17:32',
          address: '罗文洋是傻逼'
        }, {
          date: '2002-05-03 17:32',
          address: '罗文洋是傻逼'
        }, {
           date: '2002-05-03 17:32',
          address: '罗文洋是傻逼'
        }, {
          date: '2002-05-03 17:32',
          address: '罗文洋是傻逼'
        }],
        multipleSelection: []
      
    };
  },
  computed: {},
  methods: {
    getTime() {
      let y = new Date().getFullYear();
      let m = new Date().getMonth();
      let day = new Date().getDate();
      day = day - 1;
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      mf = mf + 30;
      if (mf >= 60) {
        hh++;
        mf = mf - 60;
        mf = mf < 10 ? "0" + mf : mf;
      }
      this.currentTime = y + "-" + m + "-" + day + " " + hh + ":" + mf;
      console.log(this.currentTime);
    },
    user() {
      this.userDialogVisible = true;
        this.$nextTick(function() {
        var chartDom = document.getElementById("userGram");
      var myChart = echarts.init(chartDom);
      var option;

      var base = +new Date(1988, 9, 3);
      var oneDay = 24 * 3600 * 1000;

      var data = [[base, Math.random() * 300]];

      for (var i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        data.push([
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
          Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])
        ]);
      }

      option = {
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          }
        },
        title: {
          left: "center",
          text: "用户访客量图"
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "time",
          boundaryGap: false
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"]
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 20
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: "模拟数据",
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {},
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
    })
    },
    info() {
      this.MessageDialogVisible   = true;
    },
    time() {
      this.dialogVisible = true;
    },
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      toRead(){
        this.tableData = null;
      }
    
  },
  
  created() {},
  mounted() {
    this.getTime();
  }
};
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
#top {
  height: 100vh;
}
.bottom {
  color: gold;
  font-size: 20px;
  float: left;
  animation: myani 20s infinite linear alternate;
}
.bottom2 {
  color: gold;
  font-size: 20px;
  float: right;
  animation: myani2 20s infinite linear alternate;
}
@keyframes myani {
  from {
    transform: translate(0px);
  }
  50% {
    transform: translate(600px);
  }
  to {
    color: red;
    transform: translate(0);
  }
}
@keyframes myani2 {
  from {
    transform: translate(0);
  }
  50% {
    transform: translate(-600px);
  }
  to {
    color: red;
    transform: translate(0px);
  }
}
.card {
  width: 100px;
  height: 100px;
}
#footer {
  margin-top: 50px;
  padding-left: 50px;
  padding-right: 100px;

}
.C {
  margin-left: 50px;
  padding: 0;
}
.C:hover {
  cursor: pointer;
}
#left {
  height: 100%;
  width: 40%;
  float: left;
  text-align: center;
}
#right {
  margin-top: 20px;
  width: 60%;
  text-align: center;
  float: left;
}
#font_user_top {
  font-size: 30px;
  color: #2d8cf0;
  margin-bottom: 20px;
}
#font_user_bo {
  color: #a9a9a9;
}
#userGram {
  height: 400px;
  width: 1200px;
}
#top{
   
        overflow: auto;
        height: calc(100vh - 50px);
  }


</style>